<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/gg.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/iconfont.css">

</head>

<body>

    <header class="clearFix position">
        <div class="logo">
            <a href=""><img src="./images/logo.jpg" alt=""></a>
        </div>
        <div class="lf">
            <a href=""><span>主页</span></a>
            <a href=""><span>项目</span></a>
            <a href=""><span>关于</span></a>
            <a href=""><span>联系我们</span></a>
        </div>
        <div class="rg">
            <a href="">登录</a>
            <a href=""><i class="iconfont icon-fangdajing"></i></a>
            <a href=""><i class="iconfont icon-24gf-telephone"></i><span>Call : +01 12345567890</span></a>
        </div>
    </header>
   <div class="lunbo position">
    <div class="bannerbox clearFix">
        <div class="banner clearFix lf">
            <div class="bannerboxone clearFix box mar">
                <div class="lf bannertextbox">
                    <h2>Full Service</h2>
                    <h3>SEO Marketing</h3>
                    <p class="bannertext">Anything embarrassing hidden in the middle of text. All the Lorem Ipsuanything embarrassing
                        hidden in the middle of text. All the Lorem Ipsumm</p>
                    <p class="anniubox"><button>Read More</button><button>Contact Us</button></p>
                </div>
                <div class="lf bannerimg">
                    <img src="./images/banner.jpg" alt="">
                </div>
            </div>
        </div>
        <div class="banner clearFix lf">
            <div class="bannerboxone clearFix box mar">
                <div class="lf bannertextbox">
                    <h2>Full Service</h2>
                    <h3>SEO Marketing</h3>
                    <p class="bannertext">Anything embarrassing hidden in the middle of text. All the Lorem Ipsuanything embarrassing
                        hidden in the middle of text. All the Lorem Ipsumm</p>
                    <p class="anniubox"><button>Read More</button><button>Contact Us</button></p>
                </div>
                <div class="lf bannerimg">
                    <img src="./images/banner.jpg" alt="">
                </div>
            </div>
        </div>
        <div class="banner clearFix lf">
            <div class="bannerboxone clearFix box mar">
                <div class="lf bannertextbox">
                    <h2>Full Service</h2>
                    <h3>SEO Marketing</h3>
                    <p class="bannertext">Anything embarrassing hidden in the middle of text. All the Lorem Ipsuanything embarrassing
                        hidden in the middle of text. All the Lorem Ipsumm</p>
                    <p class="anniubox"><button>Read More</button><button>Contact Us</button></p>
                </div>
                <div class="lf bannerimg">
                    <img src="./images/banner.jpg" alt="">
                </div>
            </div>
        </div>
        <span class="anlf"><i class="iconfont icon-bg-left"></i></span>
        <span class="anrg"><i class="iconfont icon-bg-right"></i></span>
    </div>

   </div>
    <div class="aboutbox">
        <div class="about clearFix box mar position">
            <div class="aboutlf lf"><img src="./images/about-img.png" alt=""></div>
            <div class="aboutrg lf">
                <h3>About</h3>
                <h2>Grow Your Business
                    with Our Company</h2>
                    <p class="abouttext">Words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks</p>
                    <p><button>
                        Read More
                      </button></p>
            </div>
            <span class="antiaolf"></span> 
            <span class="antiaorg"></span>
        </div>
    </div>

    <div class="xmbox">
        <div class="xm box mar clearFix position">
            <h2>Services</h2>
            <h3>Business</h3>
            <div class="xmcont clearFix">
                <div class="xmlf1 lf">
                    <div class="xmlf1cont">
                        <div class="xmlf1contimg"><img src="./images/s1.png" alt=""></div>
                        <p>Content Marketing</p>
                        <p>Generators on the Internet tend to repeat predefined chunks as necessary</p>
                    </div>
                    <div class="xmlf1cont">
                        <div class="xmlf1contimg"><img src="./images/s2.png" alt=""></div>
                        <p>SEO Optimization</p>
                        <p>Generators on the Internet tend to repeat predefined chunks as necessary</p>
                    </div>
                </div>
                <div class="xmlf2 lf">
                    <div class="xmlf2cont">
                        <div class="xmlf2contimg"><img src="./images/s3.png" alt=""></div>
                        <p>PPC Advertising</p>
                        <p>Generators on the Internet tend to repeat predefined chunks as necessary</p>
                        <p><button>Read More</button></p>
                    </div>
                </div>
                <div class="xmlf3 lf">
                    <div class="xmlf3cont">
                        <div class="xmlf3contimg"><img src="./images/s4.png" alt=""></div>
                        <p>App Development</p>
                        <p>Generators on the Internet tend to repeat predefined chunks as necessary</p>
                    </div>
                    <div class="xmlf3cont">
                        <div class="xmlf3contimg"><img src="./images/s2.png" alt=""></div>
                        <p>Social Marketing</p>
                        <p>Generators on the Internet tend to repeat predefined chunks as necessary</p>
                    </div>
                </div>
            </div>
            <span class="antiaolf"></span> 
            <span class="antiaorg"></span>
        </div>
    </div>

    <div class="paybox">
        <div class="pay clearFix mar box">
            <div class="paylf lf">
                <img src="./images/pay-img.jpg" alt="">
            </div>
            <div class="payrg lf">
                <h2>Pay for Qualified Traffic</h2>
                <p class="paytext">Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore</p>
                <p><button>Read More</button></p>
            </div>
        </div>
    </div>

    <div class="xuanbox">
        <div class="xuan clearFix mar box">
            <h2>Testimonial</h2>
            <h3>Even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to</h3>
            <div class="xuantext position">
                <h4>JACK MORK</h3>
                    <p class="xuantextone xuandisplay">Many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All themany variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some embarrassing hidden in the middle of text. All the</p>
                    <p class="xuantextone">If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All themany variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some embarrassing hidden in the middle of text, Many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p class="xuantextone">All themany variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some embarrassing hidden in the middle of text. Many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.</p>
                    <p class="yingyong"><i class="iconfont icon-quotation_marks"></i></p>
                <span class="xuanlf"><i class="iconfont icon-bg-left"></i></span>
                <span class="xuanrg"><i class="iconfont icon-bg-right"></i></span>
            </div>
        </div>
    </div>

    <div class="yjbox">
        <div class="yj clearFix box mar">
            <div class="yjlf lf">
                <h2>GET IN TOUCH</h2>
                <p><input type="text" placeholder="Your Name"></p>
                <p><input type="text" placeholder="Your E-emal"></p>
                <p><input type="text" placeholder="Your Phone"></p>
                <p><textarea name="" id="" cols="30" rows="10" placeholder="Message"></textarea></p>
                <p><button>SEND</button></p>
            </div>
            <div class="yjrg lf">
                <h2>NEWSLETTER</h2>
                <p class="yjtext">The majority have suffered alteration in some form, by injected humour, or randomised words which don't</p>
                <p><input type="text" placeholder="Enter Your email"></p>
                <p><button>
                    Subscribe Now
                  </button></p>
            </div>
        </div>
    </div>

    <footer>
        <div class="foot box mar clearFix">
            <div class="footlx clearFix">
                <div class="footlxbox lf">
                    <p><i class="iconfont icon-weizhi"></i></p>
                    <p>
                        Address
                      </p>
                    <p><a href="">
                        Location
                      </a></p>
                </div>
                <div class="footlxbox lf">
                    <p><i class="iconfont icon-24gf-telephone"></i></p>
                    <p>
                        
              Phone
            
                      </p>
                    <p><a href="">
                        
              +01 123467890
            
                      </a></p>
                </div>
                <div class="footlxbox lf">
                    <p><i class="iconfont icon-a-youjianchakanyoujianfasongyoujianshouyoujian-06"></i></p>
                    <p>
                       
              Email
            
                      </p>
                    <p><a href="">
                        
              demo@gmail.com
            
                      </a></p>
                </div>
            </div>
           <div class="lxappbox clearFix">
               <div class="lxfsnav">
                <span><a href="">主页</a></span><span><a href="">项目</a></span><span><a href="">关于</a></span><span><a href="">联系我们</a>
               </div>
               <div class="lxapp">
                <a href=""><i class="iconfont icon-zhifubaozhifu"></i></a><a href=""><i class="iconfont icon-tuite"></i></a><a href=""><i class="iconfont icon-xinlangweibo"></i></a>
               </div>
           </div>
           <p>Copyright © 2021.Company name All rights reserved.</p>
        </div>
    </footer>
    <script src="./js/jquery-3.5.1.min.js"></script>
    <script src="./js/index.js"></script>

</body>

</html>